<template>
  <div class="report-contain">
    <div class="section">
      <div class="report-header">
        <div class="text1"></div>
        <div class="header-right">
          <div class="createVipBtn" @click="saveReport">
            <el-icon color="#ffffff" size="16"><Download /></el-icon>
            <span>下载报告</span>
          </div>
        </div>
      </div>
      <div class="report-body">
        <div class="report-title">张鸣鸣｜健康状况详细报告</div>
        <div class="report-time">
          <el-icon><Clock /></el-icon>
          <div>报告时间：2025-05-05</div>
        </div>
        <div class="report-group">
          <div class="group-title">
            <div class="group-left">
              <img src="" alt="" />
              <div>{{ store.title }}</div>
            </div>
            <div class="gropt-rigth">
              <div class="text1">爱自己爱健康</div>
              <div class="text2">025-0000-0000</div>
            </div>
          </div>
          <div class="user-info">
            <div class="user-info-box">
              <div class="user-info-box-left">
                <div class="user-info-name">张鸣鸣 先生</div>
                <div class="user-info-others">
                  <div>性别：男</div>
                  <div>年龄：28岁</div>
                  <div>户籍：北京</div>
                </div>
                <div class="user-info-others">
                  <div>电话：18055555555</div>
                  <div>时间：2025-05-05 05:50</div>
                  <div>编号：2025005-0005</div>
                </div>
              </div>
              <div>
                <el-progress
                  type="circle"
                  :percentage="35.5 * 2"
                  :stroke-width="10"
                  color="#0BD7CB"
                  class="custom-progress"
                >
                  <template #default="{ percentage }">
                    <div>
                      <div class="percentage-value">35<span>.2</span></div>
                      <div class="percentage-label">温度值°C</div>
                    </div>
                  </template>
                </el-progress>
              </div>
            </div>
            <div class="report-item">
              <div class="report-item-title">
                <span class="text1"></span>
                <span>健康总评：</span>
              </div>
              <div class="report-item-con">
                近期出现胸口疼痛症状，伴随胳膊部位不适，且自感体内热量过低，可能存在心血管系统或肌肉骨骼系统方面的问题。胸口疼痛尤其需要警觉，因其可能与心脏疾病相关。胳膊疼痛若与特定活动相关，可能是肌肉或神经受损所致；而全身性的能量低下可能涉及代谢、内分泌失调或其他潜在的系统性疾病。
              </div>
            </div>
            <div class="report-item">
              <div class="report-item-title">
                <span class="text1"></span>
                <span>健康建议：</span>
              </div>
              <div class="report-item-con">
                鉴于上述症状的潜在严重性，建议即刻停止当前活动，采取舒适体位休息，并尽快就医进行全面评估，包括但不限于心电图检查、血液检测（如心肌酶谱、电解质）以及必要时的影像学检查（X光或CT扫描），以排除严重的心脏问题或其他内科状况。同时，保持体温，适当增添衣物，避免受寒，保证充足水分与营养摄入，以稳定身体状态。
              </div>
            </div>
          </div>
        </div>
      </div>
      <div id="content" style="width: 800px; margin: 28px auto 0">
        <div>
          <div
            style="
              font-family: AlibabaPuHuiTi_2_85_Bold;
              font-size: 30px;
              color: #333333;
              letter-spacing: 0;
              text-align: center;
              font-weight: 900;
              margin-bottom: 6px;
            "
          >
            张鸣鸣｜健康状况详细报告
          </div>
          <div
            style="
              font-family: AlibabaPuHuiTi_2_65_Medium;
              font-size: 15px;
              color: #333333;
              letter-spacing: 0;
              text-align: center;
              font-weight: 500;
            "
          >
            报告时间：2025-05-05
          </div>
        </div>

        <div
          style="
            font-family: AlibabaPuHuiTi_2_85_Bold;
            font-size: 30px;
            color: #333333;
            letter-spacing: 0;
            line-height: 30px;
            font-weight: 700;
            margin-bottom: 10px;
            padding-bottom: 10px;
            border-bottom: 1px solid #efeff5;
          "
        >
          张鸣鸣 先生
        </div>
        <div style="margin-bottom: 30px">
          <div
            style="
              font-family: AlibabaPuHuiTi_2_65_Medium;
              font-size: 14px;
              color: #333333;
              letter-spacing: 0;
              font-weight: 500;
              margin-bottom: 8px;
            "
          >
            性别：男
          </div>
          <div
            style="
              font-family: AlibabaPuHuiTi_2_65_Medium;
              font-size: 14px;
              color: #333333;
              letter-spacing: 0;
              font-weight: 500;
              margin-bottom: 8px;
            "
          >
            性别：男
          </div>
          <div
            style="
              font-family: AlibabaPuHuiTi_2_65_Medium;
              font-size: 14px;
              color: #333333;
              letter-spacing: 0;
              font-weight: 500;
              margin-bottom: 8px;
            "
          >
            性别：男
          </div>
        </div>

        <div
          style="
            font-family: AlibabaPuHuiTi_2_65_Medium;
            font-size: 19px;
            color: #333333;
            letter-spacing: 0;
            font-weight: 900;
            margin-bottom: 10px;
            margin-top: 20px;
          "
        >
          健康总评
        </div>
        <div
          style="
            font-family: AlibabaPuHuiTi_2_55_Regular;
            font-size: 15px;
            color: #555555;
            letter-spacing: 0;
            text-align: justify;
            line-height: 24px;
            font-weight: 400;
          "
        >
          近期出现胸口疼痛症状，伴随胳膊部位不适，且自感体内热量过低，可能存在心血管系统或肌肉骨骼系统方面的问题。胸口疼痛尤其需要警觉，因其可能与心脏疾病相关。胳膊疼痛若与特定活动相关，可能是肌肉或神经受损所致；而全身性的能量低下可能涉及代谢、内分泌失调或其他潜在的系统性疾病。
        </div>
        <div
          style="
            font-family: AlibabaPuHuiTi_2_65_Medium;
            font-size: 19px;
            color: #333333;
            letter-spacing: 0;
            font-weight: 900;
            margin-bottom: 10px;
            margin-top: 20px;
          "
        >
          健康建议：
        </div>
        <div
          style="
            font-family: AlibabaPuHuiTi_2_55_Regular;
            font-size: 15px;
            color: #555555;
            letter-spacing: 0;
            text-align: justify;
            line-height: 24px;
            font-weight: 400;
          "
        >
          鉴于上述症状的潜在严重性，建议即刻停止当前活动，采取舒适体位休息，并尽快就医进行全面评估，包括但不限于心电图检查、血液检测（如心肌酶谱、电解质）以及必要时的影像学检查（X光或CT扫描），以排除严重的心脏问题或其他内科状况。同时，保持体温，适当增添衣物，避免受寒，保证充足水分与营养摄入，以稳定身体状态。
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="report">
import { saveAs } from 'file-saver'
import htmlDocx from 'html-docx-fixed/dist/html-docx'
import dayjs from 'dayjs'
import { reactive } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from '../stores'

const router = useRouter()
const store = useStore()
// 初始化数据
let data = reactive({})
const saveReport = () => {
  const htmlContent = document.getElementById('content').innerHTML

  // 将HTML内容转换为Docx格式
  const converted = htmlDocx.asBlob(htmlContent)
  let fileName = 'zsl_' + dayjs().valueOf() + '.docx'
  // 使用file-saver保存生成的Word文档
  saveAs(converted, fileName)
}
</script>

<style lang="less" scoped>
.report-contain {
  padding: 16px 24px;
  height: calc(100% - 50px);
  overflow: scroll;
}

.section {
  padding: 12px 24px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
  min-height: 100%;
}
.report-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  border-bottom: 1px solid #efeff5;
  padding-bottom: 12px;

  .text1 {
    width: 34px;
    height: 34px;
    background: rgba(49, 186, 181, 0.1);
    border: 1px solid rgba(49, 186, 181, 1);
    border-radius: 50%;
    cursor: pointer;
  }
  .header-right {
    display: flex;
    align-items: center;
    .createVipBtn {
      margin-left: 20px;
    }
  }
}
.report-body {
  width: 800px;
  margin: 28px auto 0;
  .report-title {
    font-family: AlibabaPuHuiTi_2_85_Bold;
    font-size: 30px;
    color: #333333;
    letter-spacing: 0;
    text-align: center;
    line-height: 30px;
    font-weight: 900;
  }
  .report-time {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: AlibabaPuHuiTi_2_65_Medium;
    font-size: 15px;
    color: #333333;
    letter-spacing: 0;
    text-align: center;
    line-height: 15px;
    font-weight: 500;
    margin-top: 20px;
    margin-bottom: 30px;
    div {
      margin-left: 5px;
    }
  }
  .report-group {
    width: 100%;
    background-image: linear-gradient(0deg, #5fdedb 39%, #26cfc9 79%);
    border-radius: 16px;
    padding: 18px 20px;
    .group-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16px;
      .group-left {
        display: flex;
        align-items: center;
        font-family: AlibabaPuHuiTi_2_85_Bold;
        font-size: 22px;
        color: #ffffff;
        letter-spacing: 0;
        line-height: 22px;
        font-weight: 700;
        img {
          width: 32px;
          height: 32px;
          margin: 5px;
        }
      }
      .gropt-rigth {
        .text1 {
          font-family: AlibabaPuHuiTi_2_85_Bold;
          font-size: 15px;
          color: #ffffff;
          letter-spacing: 0;
          line-height: 15px;
          font-weight: 700;
        }
        .text2 {
          font-family: AlibabaPuHuiTi_2_85_Bold;
          font-size: 12px;
          color: #ffffff;
          letter-spacing: 0;
          line-height: 12px;
          font-weight: 700;
          margin-top: 5px;
        }
      }
    }
  }
}
.user-info {
  background: #ffffff;
  border-radius: 16px;
  padding: 30px;
  .user-info-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
    .user-info-box-left {
      width: 542px;
      padding-bottom: 5px;
      border-bottom: 1px solid #efeff5;
      .user-info-name {
        font-family: AlibabaPuHuiTi_2_85_Bold;
        font-size: 30px;
        color: #333333;
        letter-spacing: 0;
        line-height: 30px;
        font-weight: 700;
        margin-bottom: 25px;
      }
      .user-info-others {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 15px;
        div {
          width: 33%;
          flex-shrink: 0;
          font-family: AlibabaPuHuiTi_2_65_Medium;
          font-size: 14px;
          color: #333333;
          letter-spacing: 0;
          line-height: 14px;
          font-weight: 500;
        }
      }
    }
  }

  .report-item {
    margin-bottom: 25px;
  }
  .report-item-title {
    display: flex;
    align-items: center;
    font-family: AlibabaPuHuiTi_2_65_Medium;
    font-size: 19px;
    color: #333333;
    letter-spacing: 0;
    line-height: 17px;
    font-weight: 900;
    margin-bottom: 11px;
    .text1 {
      width: 4px;
      height: 18px;
      background: #31bab5;
      border-radius: 2px;
      margin-right: 5px;
    }
  }
  .report-item-con {
    font-family: AlibabaPuHuiTi_2_55_Regular;
    font-size: 15px;
    color: #555555;
    letter-spacing: 0;
    text-align: justify;
    line-height: 24px;
    font-weight: 400;
  }
}
.percentage-value {
  font-family: AlibabaPuHuiTi_2_85_Bold;
  font-size: 40px;
  color: #333333;
  letter-spacing: 0;
  font-weight: 700;
  margin-bottom: 8px;
  span {
    font-size: 26px;
  }
}
.percentage-label {
  font-family: AlibabaPuHuiTi_2_65_Medium;
  font-size: 14px;
  color: #333333;
  letter-spacing: 0;
  text-align: center;
  font-weight: 900;
}
#content {
  position: absolute;
  z-index: -9;
  opacity: 0;
}
</style>
